<template>
	<view class="bnn-load-more" :style="{height: height}">
		<view v-if="status === 'noMore'" class='no-more'><view class='loading-text'>{{textObj.noMore}}</view></view>
		<view v-if="status === 'more'" class='more'><view class='loading-text'>{{textObj.more}}</view></view>
		<view v-if="status === 'loading'" class='loading'>
			<view class='loading-icon'>
				<view class="icon-box">
					<view class="line"/>
					<view class="line"/>
					<view class="line"/>
					<view class="line"/>
					<view class="line"/>
					<view class="line"/>
					<view class="line"/>
					<view class="line"/>
					<view class="line"/>
					<view class="line"/>
					<view class="line"/>
					<view class="line"/>
				</view>
			</view>
			<view class='loading-text'>{{textObj.loading}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				textObj: { more: '查看更多', loading: '正在加载 . . .', noMore: '已经到底啦' }
			}
		},
		props: {
			height: {
				type: String,
				default: '50px'
			},
			status: {
				type: String,
				default: ''
			},
			text: {
				type: Object,
				default: function () {
					return {}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bnn-load-more{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		>view {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.loading-text{
			color: #666;
			display: flex;
			font-size: 24rpx;
		}
		.loading-icon{
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
			display: inline-block;
			overflow: hidden;
			// background: #ffffff;
			@keyframes loading {
				0% { opacity: 1 }
				100% { opacity: 0 }
			}
		
			.icon-box{
				width: 100%;
				height: 100%;
				position: relative;
				transform: translateZ(0) scale(0.2);
				transform-origin: 0 0;
				backface-visibility: hidden;
			}
			.line {
				top: 16rpx;
				left: 96rpx;
				width: 8rpx;
				height: 24rpx;
				position: absolute;
				animation: loading linear 1s infinite;
				box-sizing: content-box;
				border-radius: 0px / 0px;
				transform-origin: 4rpx 84rpx;
				background-color: $theme_color;
				&:nth-child(1) {transform: rotate(0deg);animation-delay: -0.9166666666666666s;}
				&:nth-child(2) {transform: rotate(30deg);animation-delay: -0.8333333333333334s;}
				&:nth-child(3) {transform: rotate(60deg);animation-delay: -0.75s;}
				&:nth-child(4) {transform: rotate(90deg);animation-delay: -0.6666666666666666s;}
				&:nth-child(5) {transform: rotate(120deg);animation-delay: -0.5833333333333334s;}
				&:nth-child(6) {transform: rotate(150deg);animation-delay: -0.5s;}
				&:nth-child(7) {transform: rotate(180deg);animation-delay: -0.4166666666666667s;}
				&:nth-child(8) {transform: rotate(210deg);animation-delay: -0.3333333333333333s;}
				&:nth-child(9) {transform: rotate(240deg);animation-delay: -0.25s;}
				&:nth-child(10) {transform: rotate(270deg);animation-delay: -0.16666666666666666s;}
				&:nth-child(11) {transform: rotate(300deg);animation-delay: -0.08333333333333333s;}
				&:nth-child(12) {transform: rotate(330deg);animation-delay: 0s;}
			}
		}
	}
</style>